<template>
	<view class="content">
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="uni-tab-bar">
			<!-- 主体导航 -->
			<scroll-view class="uni-swiper-tab" @scroll="scroll" :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabBars" :key="index" class="swiper-tab-list prodtab" :class="tabIndex==index ? 'active' : ''"
				 @click="tapTab" :data-current="index">{{item.name}}</view>
			</scroll-view>
			<swiper class="swiper" :current="tabIndex" :duration="300" @change="changeTab"  indicator-color="#C1C2C6" indicator-active-color="#134199">
				<swiper-item class="Roughing">
					<view class="prodbox">
						<view class="Roughingbox hide">
							<!-- 搜索框 -->
							<view class="search">
								<input type="text" value="searchText" v-model="searchText" class="searchinput" placeholder="钢卷号查询" />
								<view class="searchbox" @tap="details(searchText)">
									<image src="../../static/tabimg/search.png" class="searchimg"></image>
									<text class="searchtitle">搜索</text>
								</view>
							</view>
							<!-- 内容主体 -->
							<view class="planmain scroll-Y">
								<uni-collapse @change="change()">
									<view v-for="(arr,i) in plannum" :key="i">
										<uni-collapse-item @matid="getmatid(arr.num)" :class="(i%2==0)?'' : 'addcol'" :show-animation="true" :animation="true" :title="arr.name" :open="i===0?true:false">
											<view>
												<view class="prodnumber" v-for="(item,index) in matid" :key="index" :class="(index%2==0)?'' : 'addcol'">
													<view class="prodnumber-item">
														<view class="hui">{{item.name}}</view>
														<view class="mg20">{{item.num}}</view>
													</view>
													<view class="clickbtn" hover-class="clickcolor" @tap="matidDetail(item.num)">板坯详单</view>
												</view>
											</view>
										</uni-collapse-item>
									</view>
								</uni-collapse>
								<view>
									<image :src="matidSrc" class="none"></image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="Roughing">
					<swiper :indicator-dots="true" class="prodbox" indicator-color="#C1C2C6" indicator-active-color="#134199">
						<swiper-item>
							<view class="Roughingbox">
								<view class="firststove">1#炉</view>
								<view class="prodmain scroll-Y">
									<view class="prodnumber" hover-class="rowclick" v-for="(item,k) in London" :key="k" :class="(k%2==0)?'' : 'addcol'">
										<view class="prodnumber-item">
											<view class="mr20 white">{{item.name}}:</view>
											<view class="white">{{item.num}}</view>
										</view>
										<view class="clickbtn white" @tap="stove(item.num)">更多详情</view>
									</view>
									<view>
										<image :src="src" class="none"></image>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="Roughingbox">
								<view class="firststove">2#炉</view>
								<view class="prodmain scroll-Y">
									<view class="prodnumber" hover-class="rowclick" v-for="(item,k) in Paris" :key="k" :class="(k%2==0)?'' : 'addcol'">
										<view class="prodnumber-item">
											<view class="mr20 white">{{item.name}}:</view>
											<view class="blue">{{item.num}}</view>
										</view>
										<view class="clickbtn white" @tap="stove(item.num)">更多详情</view>
									</view>
									<view>
										<image :src="src2" class="none"></image>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</swiper-item>
				<swiper-item class="Roughing">
					<swiper class="prodbox" indicator-color="#C1C2C6" indicator-active-color="#134199">
						<swiper-item>
							<view class="Roughingbox">
								<view class="gostove scroll-Y">
									<view>
										<image :src="src" class="none"></image>
									</view>
									<view class="prodnumber" hover-class="rowclick" v-for="(item,k) in outstove" :key="k" :class="(k%2==0)?'' : 'addcol'">
										<view class="prodnumber-item">
											<view class="mr20 white">{{item.name}}:</view>
											<view class="white">{{item.num}}</view>
										</view>
										<view class="clickbtn white" @tap="gostove(item.num)">更多详情</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { post } from '@/lib/Util.js'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniIcon
		},
		data() {
			return {
				flag:true,
				src2:'',
				matidSrc:'',
				proID:'', //项目id
				clickShow:false,
				src:'',
				//二级导航的data
				scrollLeft: 0,
				tabIndex: 0,
				isClickChange: false,
				tabBars: [
					{
						name: '轧制计划',
						id: 'zhazhi'
					}, {
						name: '炉内列表',
						id: 'lunei'
					}, {
						name: '出炉列表',
						id: 'chulu'
					}
				],
				row:[],
				London:[],    //一号炉
				Paris: [] ,//二号炉
				outstove:[]   ,//出炉列表
				plannum:[]   ,//轧制计划
				matid:[]     ,//轧制计划下的钢卷号
				searchText:''
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),

		methods: {
			//导航栏关闭应用事件
			...mapMutations(['logout']),
			close(){
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass(){
				uni.navigateTo({
					url:'/pages/changepass/changepass'
				})
			},
			//二级菜单的事件
			tapTab(e) {
				let tabIndex = e.target.dataset.current
				if (this.tabIndex === tabIndex) { //判断重复点击
					return false;
				} else {
					this.tabIndex = tabIndex;
					this.isClickChange = true;
				}
			},
			async changeTab(e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			
			async details(val) {
				let str = val.replace(/\s*/g,"");
				let data = {}
				if(this.flag){
					data =  {
						sql: "select * from TB_PRIMARYDATA WHERE MATID =  '" + str + "'",
					}
				}else{
					data =  {
						sql: "select * from TB_PRIMARYDATA WHERE MATID =  '" + str + "' and pro_id ="+this.proID,
					}
				}
				let res = await post('database/executeQuery',data)
				console.log(res)
				if( res.data.length !== 0){
					uni.navigateTo({
						url: '../details/details?id=' + str,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else{
					uni.showToast({
						icon:'none',
						title:'暂无该信息'
					})
				}
			},
			matidDetail(data){
				console.log(data)
				uni.navigateTo({
					url: '../details/details?id=' + data,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//炉内列表
			stove(val){
				if(val){
					uni.navigateTo({
						url: '../stove/stove?id='+val,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else{
					uni.showToast({
						title:'操作有误,请确认数据是否正确',
						icon:'none'
					})
				}
			},
			gostove(val){
				if(val){
					uni.navigateTo({
						url: '../gostove/gostove?id='+val,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else{
					uni.showToast({
						title:'操作有误,请确认数据是否正确',
						icon:'none'
					})
				}
				
			},
			//下拉菜单的选择
			change() {
				console.log(11)
			},
			//一号炉
			async getLondon(){
				let london = [];
				let res = await post('database/executeQuery',{sql:"select * from V_FCE1_TS"});
				if(res.data.length === 0){
					console.log(res.data.length)
					this.src = '../../static/tabimg/none.png';
					return;
				}
				for(let i=0;i<res.data.length;i++){
					london.push({
						name:"钢卷号",
						num:res.data[i].MATID
					})
				}
				this.London = london
			},
			//二号炉
			async getParis(){
				let paris = [];
				let res = await post('database/executeQuery',{sql:"select * from V_FCE2_TS"});
				if(res.data.length ===0){
					this.src2 = '../../static/tabimg/none.png';
					return;
				}
				for(let i=0;i<res.data.length;i++){
					paris.push({
						name:"钢卷号",
						num:res.data[i].MATID
					})
				}
				this.Paris= paris
			},
			//出炉列表
			async getoutstove(){
				let outstove = []
				let res = await post('database/executeQuery',{sql:"select * from TB_PRIMARY_DATA WHERE FLOOR(SYSDATE - DISCHARGETIME ) <= 130"})
				for(let i=0;i<res.data.length;i++){
					outstove.push({
						name:"钢卷号",
						num:res.data[i].MATID
					})
				}
				this.outstove= outstove
				if(res.data.length ===0){
					this.src = '../../static/tabimg/none.png'
				}
			},
			async getplannum(){
				let plannum = []
				let res = await post('database/executeQuery',{sql:"select * from V_PDILIST_TS "})
				if(res.data.length ===0){
					this.matidSrc = '../../static/tabimg/none.png';
					return
				}
				for (let i=0;i<res.data.length;i++) {
					if(res.data[i].SCHID){
						plannum.push({
							name:"轧号: "+res.data[i].SCHID,
							num:res.data[i].SCHID
						})
					}
				}
				this.plannum= plannum;
				//获得轧号下的钢卷号
				this.getmatid()
			},
			//获得轧号下的钢卷号
			async getmatid(val){
				// if(val === undefined){
				// 	this.matidSrc = '../../static/tabimg/none.png';
				// 	return
				// }
				this.matidSrc = ''
				let matid =[]
				let data = val?val:this.plannum[0].num;
				let res
				if(this.flag){
					res = await post('database/executeQuery',{sql:"select * from TB_PRIMARYDATA where SCHID = '"+data+"'"})
				}else{
					res = await post('database/executeQuery',{sql:"select * from TB_PRIMARYDATA where SCHID = '"+data+"' and pro_id ="+this.proID})
				}
				for (let i=0;i<res.data.length;i++) {
					if(res.data[i].MATID){
						matid.push({
							name:"钢卷号",
							num:res.data[i].MATID
						})
					}
				}
				this.matid =matid
			},
		},

		onLoad() {
			this.proID = uni.getStorageSync('proid')
			// if(!this.proID){
			// 	uni.showToast({
			// 		icon:'none',
			// 		title:'请选择相对应的项目',
			// 		success() {
			// 			uni.switchTab({
			// 				url:'/pages/main/main'
			// 			})
			// 		}
			// 	})
			// }
			this.getLondon()
			this.getParis()
			//轧制计划号
			this.getplannum()
			this.getoutstove()

			if (!uni.getStorageSync('hasLogin')) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.float=="right"){
				this.clickShow = !this.clickShow;
			}
		},
		watch: {
			hasLogin() {
				if (!this.$store.state.hasLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			}
		},
	}
</script>


<style>
	/* 下面主体的高度 */
	.main {
		height: calc(1334rpx - 380rpx);
		padding: 26upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	/* 二级列表样式 */
	.prodtab {
		width: 248rpx;
		height: 100rpx;
	}

	.hide {
		overflow: hidden;
	}

	/* 搜索框 */
	.search {
		width: 640upx;
		height: 70upx;
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;
		border-radius: 35upx;
		background: white;
		margin: 24upx auto 20upx;
		border: 1upx solid #FFFFFF;
	}

	.searchimg {
		width: 33upx;
		height: 33upx;
	}

	.searchinput {
		width: 100%;
		height: 100%;
		line-height: 70upx;
		font-size: 24upx;
		color: #505153;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.searchbox {
		width: 110upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
	}

	.searchtitle {
		font-size: 24upx;
		color: #505153;
		letter-spacing: 25;
		line-height: 70upx;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.prodbox {
		height: 100%;
		width: 100%;
	}

	/* 扎号 */
	.prodnumber {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #e6e6e6;
	}

	.prodnumber-item {
		display: flex;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #000000;
	}

	.mg20 {
		margin-left: 20rpx;
		color: #2353CC;
	}
	
	.mr20{
		margin-right: 20upx;
	}

	.clickbtn {
		line-height: 70upx;
		height: 70upx;
		font-size: 24upx;
		color: #505153;
		font-family: PingFangSC-Semibold, sans-serif;
	}

	.clickcolor {
		color: #134199;
	}

	/* 一号炉 */
	.firststove {
		height: 110upx;
		line-height: 110upx;
		border-bottom: 2upx solid #c1c2c6;
		font-size: 28upx;
		color: #000000;
		font-family: PingFangSC-Semibold, sans-serif;
		text-align: center;
	}
	.prodmain {
		/* height: calc(100% - 114upx); */
		height: calc(100% - 180upx);
		font-family: PingFangSC-Semibold, sans-serif;
	}
	/* 行选中 */
	.rowclick{
		background-color: #B3B3B3 !important;
	}
	.rowclick .white{
		color: white;
	}
	.gostove{
		height: 100%;
		padding: 42upx 0 67upx;
		box-sizing: border-box;
	}
	
	.hui{
		color: #505153;
	}

</style>
